COMO COLOCAR UMA IMAGEM RESPONSIVA

Conteúdo

imagem responsiva bootstrap

Como deixar uma imagem responsiva com bootstrap?

Leia mais sobre: imagem responsiva bootstrap

Basta usar a classe do bootstrap img-responsive ou img-fluid.

A principal diferença entre o img-responsive e o img-fluid é a versão do bootstrap. Até o 3 se usava o img-responsive e depois do 4 o img-fluid.

Uma imagem responsiva serve para se adaptar a largura independente do tamanho da tela ou do navegador. Se adapta desde uma tela de desktop até um smartphone. Veja aqui o que é responsividade.

A classe img-responsive modifica a largura máxima e a altura da imagem adaptando o leiaute para a tela ou elemento pai. Para acompanhar o elemento pai ela usa width: 100% e height: auto.

Por exemplo:

Essa classe é padrão do framework, mas pode ser complementada com outras ou estilos próprios de CSS. Por exemplo para usar a imagem menor que o elemento pai para dividir por texto pode usar o width: 40%, ou para centralizar a imagem use a classe .center-block.

Por padrão a imagem irá ficar limitada ao elemento em que está contida. No caso se tiver usando um grade com col-md-6 a imagem irá ocupar apenas metade do elemento col-md-12.

Entenda melhor isso em como usar as grides do bootstrap.

Veja mais em:

Como tratar imagens com bootstrap?

Como fazer imagens com cantos arredondados no bootstrap?

Como usar miniaturas de imagens (thumbnails) no bootstrap?